<template>
  <el-row>
    <!--工具条-->
    <el-col :span="24" class="toolbar" v-if="butShow">
      <el-button @click="handleAdd" :disabled="butStatus.add" type="success">创建</el-button>
      <el-button @click="handleChange" :disabled="butStatus.modify" type="warning">修改</el-button>
      <el-button @click="handleDel" :disabled="butStatus.rm"  type="danger">删除</el-button>
    </el-col>
    <el-col :span="24">
      <el-tabs style="width:100%;" type="card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="Hdfs" name="hdfs" :disabled="cardTab.hdfs">
          <TabHdfs type="hdfs" ref="tabHdfs" @change="updateButStatus"></TabHdfs>
        </el-tab-pane>
        <el-tab-pane label="Yarn" name="yarn" :disabled="cardTab.yarn">
          <TabHdfs type="yarn" ref="tabYarn" @change="updateButStatus"></TabHdfs>
        </el-tab-pane>
        <el-tab-pane label="Hive" name="hive" :disabled="cardTab.hive">
          <TabHdfs type="hive" ref="tabHive" @change="updateButStatus"></TabHdfs>
        </el-tab-pane>
        <el-tab-pane label="Hbase" name="hbase" :disabled="cardTab.hbase">
          <TabHdfs type="hbase" ref="tabHbase" @change="updateButStatus"></TabHdfs>
        </el-tab-pane>
        <el-tab-pane label="Kafka" name="kafka" :disabled="cardTab.kafka">
          <TabHdfs type="kafka" ref="tabKafka" @change="updateButStatus"></TabHdfs>
        </el-tab-pane>
      </el-tabs>
    </el-col>

    <!--修改 弹出框-->
    <el-dialog :title="formVisibleTitle" v-model="dialogFormVisible" size="tiny" @close="cancleChange">
      <!--修改 Hdfs-->
      <el-form :model="HdfsForm"
               :rules="hdfsRules"
               ref="HdfsForm"
               :label-width="formLabelWidth"
               v-show="tabShow.Hdfs">
        <el-form-item label="ID" v-if="!createDialogFormVisible">
          <el-input v-model="HdfsForm.tenant_hdfs_id" auto-complete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="租户" prop="tenant_id">
          <!--<el-input v-model="HdfsForm.zh"  auto-complete="off" :disabled="true"></el-input>-->
          <el-select v-model="HdfsForm.tenant_id" filterable placeholder="请选择">
            <el-option v-for="item in tenantOpions" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录" prop="hdfs_dir">
          <el-input v-model="HdfsForm.hdfs_dir" auto-complete="off" :disabled="!createDialogFormVisible"></el-input>
        </el-form-item>
        <el-form-item label="文件数量配额" prop="hdfs_files_num">
          <el-input v-model="HdfsForm.hdfs_files_num" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="空间配额(TB)" prop="hdfs_files_sizes">
          <el-input v-model="HdfsForm.hdfs_files_sizes" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>

      <!--修改 Yarn-->
      <el-form :model="YarnForm" :rules="yarnRules" ref="YarnForm" :label-width="formLabelWidth"
               v-show="tabShow.Yarn">
        <el-form-item label="ID" v-if="!createDialogFormVisible">
          <el-input v-model="YarnForm.tenant_yarn_id" auto-complete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="租户" prop="tenant_id">
          <el-select v-model="YarnForm.tenant_id" filterable placeholder="请选择">
            <el-option v-for="item in tenantOpions" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="队列" prop="yarn_queue_id">
          <el-select v-model="YarnForm.yarn_queue_id" @change="changeQueue" placeholder="请选择">
            <el-option v-for="item in queueOption" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="资源（%）">
          <el-input v-model="YarnForm.capacity" auto-complete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="最大资源（%）">
          <el-input v-model="YarnForm.maxCapacity" auto-complete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="最大应用数量">
          <el-input v-model="YarnForm.maxApplications" auto-complete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="每个用户最低资源保障(%)">
          <el-input v-model="YarnForm.userLimit" auto-complete="off" :disabled="true"></el-input>
        </el-form-item>
      </el-form>

      <!--修改Hive-->
      <el-form :model="HiveForm" :rules="hiveRules" ref="HiveForm" :label-width="formLabelWidth"
               v-show="tabShow.Hive">
        <el-form-item label="ID" v-if="!createDialogFormVisible">
          <el-input v-model="HiveForm.tenant_hive_id" auto-complete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="租户" prop="tenant_id">
          <el-select v-model="HiveForm.tenant_id" filterable placeholder="请选择">
            <el-option v-for="item in tenantOpions" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据库" prop="hive_database_name">
          <el-input v-model="HiveForm.hive_database_name" auto-complete="off"
                    :disabled="!createDialogFormVisible"></el-input>
        </el-form-item>
        <el-form-item label="目录">
          <el-input v-model="HiveForm.hive_dir" auto-complete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="表数配额" prop="hive_files_num">
          <el-input v-model="HiveForm.hive_files_num" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="空间配额(TB)" prop="hive_files_sizes">
          <el-input v-model="HiveForm.hive_files_sizes" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>

      <!--修改 Hbase-->
      <el-form :model="HbaseForm" :rules="hbaseRules" ref="HbaseForm" :label-width="formLabelWidth"
               v-show="tabShow.Hbase">
        <el-form-item label="ID" v-if="!createDialogFormVisible">
          <el-input v-model="HbaseForm.tenant_hbase_id" auto-complete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="租户" prop="tenant_id">
          <el-select v-model="HbaseForm.tenant_id" filterable placeholder="请选择">
            <el-option v-for="item in tenantOpions" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="表空间" prop="hbase_tablespace_name">
          <el-input v-model="HbaseForm.hbase_tablespace_name" auto-complete="off" :disabled="!createDialogFormVisible">
            {{HbaseForm.tableSpace}}
          </el-input>
        </el-form-item>
        <el-form-item label="最大表数量" prop="hbase_tables_max_num">
          <el-input v-model="HbaseForm.hbase_tables_max_num" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="最大region数量" prop="hbase_regions_max_num">
          <el-input v-model="HbaseForm.hbase_regions_max_num" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="QPS（次/S）" prop="hbase_qps">
          <el-input v-model="HbaseForm.hbase_qps" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="OPS（M/S）" prop="hbase_ops">
          <el-input v-model="HbaseForm.hbase_ops" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>

      <!--修改 Kafka;-->
      <el-form :model="KafkaForm" :rules="kafkaRules" ref="KafkaForm" :label-width="formLabelWidth"
               v-show="tabShow.Kafka">
        <el-form-item label="ID" v-if="!createDialogFormVisible">
          <el-input v-model="KafkaForm.tenant_kafka_id" auto-complete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="租户" prop="tenant_id">
          <el-select v-model="KafkaForm.tenant_id" filterable placeholder="请选择">
            <el-option v-for="item in tenantOpions" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主题" prop="kafka_topic_name">
          <el-input v-model="KafkaForm.kafka_topic_name" auto-complete="off"
                    :disabled="!createDialogFormVisible"></el-input>
        </el-form-item>
        <el-form-item label="分区数" prop="kafka_topic_partitions_num">
          <el-input v-model="KafkaForm.kafka_topic_partitions_num" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="备份数" prop="kafka_topic_backup_num">
          <el-input v-model="KafkaForm.kafka_topic_backup_num" auto-complete="off"
                    :disabled="!createDialogFormVisible"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancleChange">取 消</el-button>
        <el-button type="primary" @click="submitPlugins" :loading="editLoading">{{btnEditText}}</el-button>
      </div>
    </el-dialog>

  </el-row>
</template>

<script>
  import util from '../../common/util'
  import TabHdfs from './TabHdfs.vue'
  import UploadPath from '../../components/UploadPath'
  import dao from '../../common/dao'
  import C from '../../common/cfg'

  export default {
    components: {TabHdfs, UploadPath},
    data() {
      return {
        dialogFormVisible: false,
        createDialogFormVisible: false,
        isUpdate: false,
        butShow:false,
        formVisibleTitle: "修改",
        btnEditText: '提 交',
        editLoading: false,
        formLabelWidth: "120px",
        hdfsRules: {
          tenant_id: [{required: true, message: '请选择租户', trigger: 'change'}],
          hdfs_files_num: [
            {required: true, message: '请输入文件数配额', trigger: 'blur'},
            {
              validator: (rule, value, callback, source, options) => {
                if (!/^[0-9]*$/.test(value)) callback(new Error('请输入数字!'));
                else callback()
              }, trigger: 'blur'
            }
          ],
          hdfs_dir: [
            {required: true, message: '请输入目录', trigger: 'blur'},
            {
              validator: (rule, value, callback) => {
                if (!(/^[/_a-zA-Z0-9]+$/.test(value))) {
                  callback(new Error('只能输入英文字母,数字和/及_'));
                } else if (!(/^(\/tenant\/)[\w]+$/.test(value))) {
                  callback(new Error('必须为 /tenant/[ 目录名 ] '));
                } else callback()
              }, trigger: 'blur'
            }
          ],
          hdfs_files_sizes: [
            {required: true, message: '请输入空间配额', trigger: 'blur'},
            {
              validator: (rule, value, callback, source, options) => {
                if (!/^[0-9]*$/.test(value)) callback(new Error('请输入数字!'));
                else callback()
              }, trigger: 'blur'
            }
          ]
        },
        yarnRules: {
          tenant_id: [{required: true, message: '请选择租户', trigger: 'change'}],
          yarn_queue_id: [{required: true, message: '请选择队列', trigger: 'change'}]
        },
        hiveRules: {
          tenant_id: [{required: true, message: '请选择租户', trigger: 'change'}],
          hive_files_num: [
            {required: true, message: '请输入空间配额', trigger: 'blur'},
            {
              validator: (rule, value, callback, source, options) => {
                if (!/^[0-9]*$/.test(value)) callback(new Error('请输入数字!'));
                else callback()
              }, trigger: 'blur'
            }
          ],
          hive_database_name: [
            {required: true, message: '请输入数据库', trigger: 'blur'},
            {validator: util.validateString, trigger: 'blur'}
          ],
          hive_files_sizes: [
            {required: true, message: '请输入文件数配额', trigger: 'blur'},
            {
              validator: (rule, value, callback, source, options) => {
                if (!/^[0-9]*$/.test(value)) callback(new Error('请输入数字!'));
                else callback()
              }, trigger: 'blur'
            }
          ]
        },
        hbaseRules: {
          tenant_id: [{required: true, message: '请选择租户', trigger: 'change'}],
          hbase_tablespace_name: [
            {required: true, message: '请输入表空间', trigger: 'blur'},
            {validator: util.validateString, trigger: 'blur'}
          ],
          hbase_tables_max_num: [
            {required: true, message: '请输入最大表数量', trigger: 'blur'}, {
              validator: (rule, value, callback, source, options) => {
                if (!/^[0-9]*$/.test(value)) callback(new Error('请输入数字!'));
                else callback()
              }, trigger: 'blur'
            }],
          hbase_regions_max_num: [
            {required: true, message: '请输入最大region数量', trigger: 'blur'}, {
              validator: (rule, value, callback, source, options) => {
                if (!/^[0-9]*$/.test(value)) callback(new Error('请输入数字!'));
                else callback()
              }, trigger: 'blur'
            }],
          hbase_qps: [
            {required: true, message: '请输入QPS（次/S）', trigger: 'blur'},
            {
              validator: (rule, value, callback, source, options) => {
                if (!/^[0-9]*$/.test(value)) callback(new Error('请输入数字!'));
                else callback()
              }, trigger: 'blur'
            }],
          hbase_ops: [
            {required: true, message: '请输入OPS（M/S）', trigger: 'blur'}, {
              validator: (rule, value, callback, source, options) => {
                if (!/^[0-9]*$/.test(value)) callback(new Error('请输入数字!'));
                else callback()
              }, trigger: 'blur'
            }]
        },
        kafkaRules: {
          tenant_id: [{required: true, message: '请选择租户', trigger: 'change'}],
          kafka_topic_name: [
            {required: true, message: '请输入主题', trigger: 'blur'},
            {validator: util.validateString, trigger: 'blur'}
          ],
          kafka_topic_partitions_num: [
            {required: true, message: '请输入分区数', trigger: 'blur'},
            {
              validator: (rule, value, callback, source, options) => {
                if (!/^[0-9]*$/.test(value)) callback(new Error('请输入数字!'));
                else callback()
              }, trigger: 'blur'
            },
            {
              validator: (rule, value, callback) => {

                (value <= parseInt(this.kafka_topic_partitions_num)) ? callback(new Error('修改分区数只可以大于原分区数')) : callback()
              }, trigger: 'blur'
            }
          ],
          kafka_topic_backup_num: [
            {required: true, message: '请输入备份数', trigger: 'blur'}, {
              validator: (rule, value, callback, source, options) => {
                if (!/^[0-9]*$/.test(value)) callback(new Error('请输入数字!'));
                else callback()
              }, trigger: 'blur'
            }]
        },
        cardTab: {
          hdfs: true,
          yarn: true,
          hive: true,
          hbase: true,
          kafka: true
        },
        tabShow: {
          Hdfs: true,
          Yarn: false,
          Hive: false,
          Hbase: false,
          Kafka: false
        },
        butStatus: {
          modify: true,
          add: false,
          rm: true
        },
        tenantOpions: [],
        HdfsForm: {
          tenant_hdfs_id: "",
          tenant_id: "",
          hdfs_dir: '/tenant/',
          hdfs_files_num: '',
          hdfs_files_sizes: ''
        },
        YarnForm: {
          tenant_yarn_id: "",
          tenant_id: "",
          capacity: "",
          maxCapacity: "",
          yarn_queue_id: "",
          yarn_queue_name: "",
          maxApplications: "",
          userLimit: ""
        },
        HiveForm: {
          tenant_hive_id: "",
          tenant_id: "",
          hive_database_name: "",
          hive_dir: C.TEBABT_RESOURCE_HIVE_CATALOG,
          hive_files_num: "",
          hive_files_sizes: ""
        },
        HbaseForm: {
          tenant_hbase_id: "",
          tenant_id: "",
          hbase_tablespace_name: "",
          hbase_tables_max_num: "",
          hbase_regions_max_num: "",
          hbase_qps: "",
          hbase_ops: ""
        },
        KafkaForm: {
          tenant_kafka_id: "",
          tenant_id: "",
          kafka_topic_name: "",
          kafka_topic_partitions_num: "",
          kafka_topic_backup_num: ""
        },
        kafka_topic_partitions_num: "",
        queueOption: [],
        queueList: [],
        selectedArray: [],
        tenantArray: [],
        pluginsArray: [],
        tenantIds: "",
        activeName: ""
      }
    },
    watch:{
      'HiveForm.hive_database_name':function(newValue, oldValue){
        this.HiveForm.hive_dir= C.TEBABT_RESOURCE_HIVE_CATALOG +  (newValue?`${newValue}.db`:newValue)
      }
    },
    methods: {
      getQueueOptions () {
        this.queueList = [],
          this.queueOption = []
        dao.getQueueList({}).then(res => {
          this.queueList = res.body.queueList ||[];
          this.queueList.map(ql => {
            this.queueOption.push({label: ql.name, value: ql.name});
          });
        })
      },
      handleAdd: function () {
        this.formVisibleTitle = '创建';
        this.createDialogFormVisible = true;
        this.dialogFormVisible = true;
        this.isUpdate = false;
        //获取第一个租户
        let tenant_id = this.tenantOpions[0].value + '';
        this.HdfsForm = {
          tenant_hdfs_id: "",
          tenant_id: tenant_id,
          hdfs_dir: '/tenant/',
          hdfs_files_num: "",
          hdfs_files_sizes: ""
        };
        this.YarnForm = {
          tenant_yarn_id: "",
          tenant_id: tenant_id,
          capacity: "",
          maxCapacity: "",
          maxApplications: "",
          userLimit: "",
          yarn_queue_id: "",
          yarn_queue_name: ""
        };
        this.HiveForm = {
          tenant_hive_id: "",
          tenant_id: tenant_id,
          hive_database_name: "",
          hive_dir: C.TEBABT_RESOURCE_HIVE_CATALOG,
          hive_files_num: "",
          hive_files_sizes: ""
        };
        this.HbaseForm = {
          tenant_hbase_id: "",
          tenant_id: tenant_id,
          hbase_tablespace_name: "",
          hbase_tables_max_num: "",
          hbase_regions_max_num: "",
          hbase_qps: "",
          hbase_ops: ""
        };
        this.KafkaForm = {
          tenant_kafka_id: "",
          tenant_id: tenant_id,
          kafka_topic_name: "",
          kafka_topic_partitions_num: "",
          kafka_topic_backup_num: ""
        };
        this.kafka_topic_partitions_num = 0;

      },
      handleClick: function (tab, event) {
        let d = ["Hdfs", "Yarn", "Hive", "Hbase", "Kafka"];
        let dkey = d[tab.index];
        for (var i in this.tabShow) {
          this.tabShow[i] = false;
        }
        this.tabShow[dkey] = true;
        this.getTenantOpions(dkey);
        //刷新列表
        if (dkey === "Hdfs") {
          this.$refs.tabHdfs.getTableTitle();
        } else if (dkey === "Yarn") {
          this.$refs.tabYarn.getTableTitle();
        }
        if (dkey === "Hive") {
          this.$refs.tabHive.getTableTitle();
        }
        if (dkey === "Hbase") {
          this.$refs.tabHbase.getTableTitle();
        }
        if (dkey === "Kafka") {
          this.$refs.tabKafka.getTableTitle();
        }
      },
      getTenantOpions(type){
        this.tenantOpions = [];
        this.tenantArray.map(tenant => {
          if (("," + tenant.tenant_plugins + ",").toUpperCase().indexOf(type.toUpperCase()) > -1) {
            this.tenantOpions.push({
              value: tenant.tenant_id + '',
              label: tenant.tenant_name
            });
          }
        });
      },
      handleDel () {
        let type = this.activeName;
        let tenant_id_list = [];
        if (type === "hdfs") {
          this.selectedArray.map(item => {
            tenant_id_list.push(item.tenant_hdfs_id);
          });
          if (tenant_id_list.length === 0) {
            this.$message({
              message: '请至少选择一条记录！',
              type: 'warning'
            });
          } else {
            this.$confirm('确认删除吗？', '提示', {
              type: 'info'
            }).then(() => {
              dao.deleteHdfs({"tenant_hdfs_id": tenant_id_list.toString()}).then((response) => {
                if (!response.body || response.body.retCode != 200) {
                  util.apiMsg(response);
                  return false;
                } else {
                  this.$message({
                    type: 'success',
                    message: '删除成功!'
                  });
                  //刷新列表
                  this.$refs.tabHdfs.getTableTitle();
                  if (type === "yarn") {
                    this.getQueueOptions();
                  }
                }
              }, (response) => {
              });
            });
          }
        } else if (type === "yarn") {
          this.selectedArray.map(item => {
            tenant_id_list.push(item.tenant_yarn_id);
          });
          if (tenant_id_list.length == 0) {
            this.$message({
              message: '请至少选择一条记录！',
              type: 'warning'
            });
          } else {
            this.$confirm('确认删除吗？', '提示', {
              type: 'info'
            }).then(() => {
              dao.deleteYarn({"tenant_yarn_id": tenant_id_list.toString()}).then((response) => {
                if (!response.body || response.body.retCode != 200) {
                  util.apiMsg(response);
                  return false;
                } else {
                  this.$message({
                    type: 'success',
                    message: '删除成功!'
                  });
                  this.getQueueOptions();
                  //刷新列表
                  this.$refs.tabYarn.getTableTitle();
                }
              }, (response) => {
              });
            });
          }
        }
        if (type === "hive") {
          this.selectedArray.map(item => {
            tenant_id_list.push(item.tenant_hive_id);
          });
          if (tenant_id_list.length == 0) {
            this.$message({
              message: '请至少选择一条记录！',
              type: 'warning'
            });
          } else {
            this.$confirm('确认删除吗？', '提示', {
              type: 'info'
            }).then(() => {
              dao.deleteHive({"tenant_hive_id": tenant_id_list.toString()}).then((response) => {
                if (!response.body || response.body.retCode != 200) {
                  util.apiMsg(response);
                  return false;
                } else {
                  this.$message({
                    type: 'success',
                    message: '删除成功!'
                  });
                  //刷新列表
                  this.$refs.tabHive.getTableTitle();
                }
              });
            });
          }
        }
        if (type === "hbase") {
          this.selectedArray.map(item => {
            tenant_id_list.push(item.tenant_hbase_id);
          });
          if (tenant_id_list.length == 0) {
            this.$message({
              message: '请至少选择一条记录！',
              type: 'warning'
            });
          } else {
            this.$confirm('确认删除吗？', '提示', {
              type: 'info'
            }).then(() => {
              dao.deleteHbase({"tenant_hbase_id": tenant_id_list.toString()}).then((response) => {
                if (!response.body || response.body.retCode != 200) {
                  util.apiMsg(response);
                  return false;
                } else {
                  this.$message({
                    type: 'success',
                    message: '删除成功!'
                  });
                  //刷新列表
                  this.$refs.tabHbase.getTableTitle();
                }
              }, (response) => {
              });
            });
          }
        }
        if (type === "kafka") {
          this.selectedArray.map(item => {
            tenant_id_list.push(item.tenant_kafka_id);
          });
          if (tenant_id_list.length === 0) {
            this.$message({
              message: '请至少选择一条记录！',
              type: 'warning'
            });
          } else {
            this.$confirm('确认删除吗？', '提示', {
              type: 'info'
            }).then(() => {
              dao.deleteKafka({"tenant_kafka_id": tenant_id_list.toString()}).then((response) => {
                if (!response.body || response.body.retCode != 200) {
                  util.apiMsg(response);
                  return false;
                } else {
                  this.$message({
                    type: 'success',
                    message: '删除成功!'
                  });
                  //刷新列表
                  this.$refs.tabKafka.getTableTitle();
                }
              }, (response) => {
              });
            });
          }
        }

      },
      updateButStatus (val) {
        this.selectedArray = val;
        if (val.length == 1) {
          this.butStatus.modify = false;
          this.butStatus.rm = false;
        } else if (val.length == 0) {
          this.butStatus.modify = true;
          this.butStatus.rm = true;
        } else {
          this.butStatus.modify = true;
          this.butStatus.rm = false;
        }
      },
      handleChange () {
        this.dialogFormVisible = true;
        this.formVisibleTitle = '修改';
        this.createDialogFormVisible = false;
        this.isUpdate = true;
        let type = this.activeName;
        let arg = this.selectedArray[0] || {};
        arg = JSON.parse(JSON.stringify(arg));
        let p = {};
        for (let item in arg) {
          p[item] = arg[item].toString();
        }

        if (type == "hdfs") {
          this.HdfsForm = p;
        } else if (type == "yarn") {
          this.YarnForm = p;
        } else if (type == "hive") {
          this.HiveForm = p;
        } else if (type == "hbase") {
          this.HbaseForm = p;
        } else if (type == "kafka") {
          this.KafkaForm = p;
          this.kafka_topic_partitions_num = p.kafka_topic_partitions_num || 0;
        }

      },
      cancleChange () {

        this.dialogFormVisible = false;
        this.createDialogFormVisible = true;
        this.HdfsForm = {};
        this.YarnForm = {};
        this.HiveForm = {};
        this.HbaseForm = {};
        this.KafkaForm = {};

        let type = this.activeName
        if (type == "hdfs") {
          this.$refs.HdfsForm.resetFields();
        } else if (type == "yarn") {
          this.$refs.YarnForm.resetFields();
        } else if (type == "hive") {
          this.$refs.HiveForm.resetFields();
        } else if (type == "hbase") {
          this.$refs.HbaseForm.resetFields();
        } else if (type == "kafka") {
          this.$refs.KafkaForm.resetFields();
        }

      },
      changeDirectory () {
        this.HiveForm.hive_dir = `${C.TEBABT_RESOURCE_HIVE_CATALOG}${this.HiveForm.hive_database_name}${this.HiveForm.hive_database_name ? '.db' : ''}`;
      },
      pageInit () { //获取页面跳转参数
        let pluginsStr = "";
        this.tenantArray = util.fetch('page42_tenantArray');
        this.butShow = util.fetch('page42_butShow');
        this.tenantArray.map(tenant => {
          tenant.tenant_id = parseInt(tenant.tenant_id);
          if (tenant.tenant_plugins != null && tenant.tenant_plugins != "") {
            pluginsStr += "," + tenant.tenant_plugins;
          }
        });
        this.pluginsArray = Array.from(new Set(pluginsStr.split(",")));
        for (let i in  this.pluginsArray) {
          let plugins = this.pluginsArray[i];
          if (plugins != null && plugins.toUpperCase() === "HDFS") {
            this.cardTab.hdfs = false;
          }
          if (plugins != null && plugins.toUpperCase() === "YARN") {
            this.cardTab.yarn = false;
          }
          if (plugins != null && plugins.toUpperCase() === "HIVE") {
            this.cardTab.hive = false;
          }
          if (plugins != null && plugins.toUpperCase() === "HBASE") {
            this.cardTab.hbase = false;
          }
          if (plugins != null && plugins.toUpperCase() === "KAFKA") {
            this.cardTab.kafka = false;
          }
        }
        if (this.cardTab.hdfs === false) {
          this.activeName = "hdfs";
        } else if (this.cardTab.yarn === false) {
          this.activeName = "yarn";
        } else if (this.cardTab.hive === false) {
          this.activeName = "hive";
        } else if (this.cardTab.hbase === false) {
          this.activeName = "hbase";
        } else if (this.cardTab.kafka === false) {
          this.activeName = "kafka";
        }
        this.getTenantOpions(this.activeName);
      },
      submitPlugins () {

        let val = (this.createDialogFormVisible) ? 0 : 1; //0是创建 1是修改
        let func = this.getFunc(val);
        this.$refs[func.formName].validate((valid) => {
          if (valid) {
            this.$confirm('确认提交吗？', '提示', {
              type: 'info'
            }).then(() => {
              this.btnEditText = '提交中';
              this.editLoading = true;
              let type = this.activeName;
              dao[func.daoFunc](func.param).then((response) => {
                this.btnEditText = '提 交';
                this.editLoading = false;

                if (response.FX.err) {
                  return false;
                } else {
                  this.dialogFormVisible = false;

                  this.$message({
                    type: 'success',
                    message: '提交成功!'
                  });
                  //刷新列表
                  if (type === "hdfs") {
                    this.$refs.tabHdfs.getTableTitle();
                  } else if (type === "yarn") {
                    this.getQueueOptions();
                    this.$refs.tabYarn.getTableTitle();
                  }
                  if (type === "hive") {
                    this.$refs.tabHive.getTableTitle();
                  }
                  if (type === "hbase") {
                    this.$refs.tabHbase.getTableTitle();
                  }
                  if (type === "kafka") {
                    this.$refs.tabKafka.getTableTitle();
                  }
                }
              }, (response) => {
              });
            }).catch(() => {

            });
          }
        });

      },
      getFunc (val) {
        let param = {};
        let type = this.activeName;
        let daoFunc = '';
        let resourceForm = '';
        let formName = '';
        if (type === "hdfs") {
          param = {
            tenant_hdfs_id: this.HdfsForm.tenant_hdfs_id,
            tenant_id: this.HdfsForm.tenant_id,
            hdfs_dir: this.HdfsForm.hdfs_dir,
            hdfs_files_num: this.HdfsForm.hdfs_files_num,
            hdfs_files_sizes: this.HdfsForm.hdfs_files_sizes
          };
          if (val == 0) {
            daoFunc = "addHdfs";
            resourceForm = "editHdfsForm";
            formName = 'HdfsForm';
          } else {
            daoFunc = "updateHdfs";
            resourceForm = "editHdfsForm";
            formName = 'HdfsForm';
          }
        }
        else if (type == "yarn") {
          //获取yarn_queue_name
          let queue_name = "";
          this.queueOption.map(queue => {
            if (this.YarnForm.yarn_queue_id == queue.value) {
              queue_name = queue.label;
            }
          });
          param = {
            tenant_yarn_id: this.YarnForm.tenant_yarn_id,
            tenant_id: this.YarnForm.tenant_id,
            capacity: this.YarnForm.capacity,
            yarn_queue_id: this.YarnForm.yarn_queue_id,
            yarn_queue_name: queue_name,
            maxCapacity: this.YarnForm.maxCapacity,
            maxApplications: this.YarnForm.maxApplications,
            userLimit: this.YarnForm.userLimit
          }
          if (val == 0) {
            daoFunc = "addYarn";
            resourceForm = "editYarnForm";
            formName = 'YarnForm'
          } else {
            daoFunc = "updateYarn";
            resourceForm = "editYarnForm";
            formName = 'YarnForm'
          }

        }
        else if (type == "hive") {
          param = {
            tenant_hive_id: this.HiveForm.tenant_hive_id,
            tenant_id: this.HiveForm.tenant_id,
            hive_database_name: this.HiveForm.hive_database_name,
            hive_dir: this.HiveForm.hive_dir,
            hive_files_sizes: this.HiveForm.hive_files_sizes,
            hive_files_num: this.HiveForm.hive_files_num
          }
          if (val == 0) {
            daoFunc = "addHive"
            resourceForm = "editHiveForm";
            formName = 'HiveForm'
          } else {
            daoFunc = "updateHive";
            resourceForm = "editHiveForm";
            formName = 'HiveForm'
          }
        }
        else if (type == "hbase") {
          param = {
            tenant_hbase_id: this.HbaseForm.tenant_hbase_id,
            tenant_id: this.HbaseForm.tenant_id,
            hbase_tablespace_name: this.HbaseForm.hbase_tablespace_name,
            hbase_tables_max_num: this.HbaseForm.hbase_tables_max_num,
            hbase_regions_max_num: this.HbaseForm.hbase_regions_max_num,
            hbase_qps: this.HbaseForm.hbase_qps,
            hbase_ops: this.HbaseForm.hbase_ops
          }
          if (val == 0) {
            daoFunc = "addHbase";
            resourceForm = "editHbaseForm";
            formName = 'HbaseForm'
          } else {
            daoFunc = "updateHbase";
            resourceForm = "editHbaseForm";
            formName = 'HbaseForm'
          }
        }
        else if (type == "kafka") {
          param = {
            tenant_kafka_id: this.KafkaForm.tenant_kafka_id,
            tenant_id: this.KafkaForm.tenant_id,
            kafka_topic_name: this.KafkaForm.kafka_topic_name,
            kafka_topic_partitions_num: this.KafkaForm.kafka_topic_partitions_num,
            kafka_topic_backup_num: this.KafkaForm.kafka_topic_backup_num
          }
          if (val == 0) {
            daoFunc = "addKafka";
            resourceForm = "editKafkaForm";
            formName = 'KafkaForm'
          } else {
            daoFunc = "updateKafka";
            resourceForm = "editKafkaForm";
            formName = 'KafkaForm'
          }
        }
        return {'param': param, 'daoFunc': daoFunc, 'resourceForm': resourceForm, 'formName': formName}
      },
      changeQueue (val) {
        for (let ql of this.queueList) {
          if (val == ql.name) {
            this.YarnForm.capacity = ql.capacity;
            this.YarnForm.maxCapacity = ql.maxCapacity;
            this.YarnForm.maxApplications = ql.maxApplications;
            this.YarnForm.userLimit = ql.userLimit;
            break;
          }
        }
      }
    },
    mounted () {
      this.getQueueOptions();
      this.pageInit();
    }
  }
</script>

<style scoped>

  .flo-r {
    float: right;
  }

  .flo-r:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
  }

  .toolbar {
    background: #fff;
    padding: 10px;
  }

  .el-dialog .el-select {
    width: 100%;
  }
</style>
